<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<style>
.ui-widget,.ui-widget .ui-widget {
	font-size: 10px !important;
}
</style>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Customer Self Service</title>
</h:head>

<h:body>

	<h:outputStylesheet library="css" name="layout.css" target="head" />
	<div id="container" style="height: 100%">
		<div id="top">
			<h:form>
				<div id="flag">
					<h:graphicImage width="200" height="20" onclick="/index.jsf"
						value="#{resource['images:country_flag.gif']}">

						<f:facet name="onclick">
						   /index.jsf
						  </f:facet>
					</h:graphicImage>
					<div style="aligh: bottom">

						Welcome <strong> #{customerBean.customer.lastName} &nbps;
							#{customerBean.customer.firstName} &nbsp;&nbsp; <p:commandLink
								ajax="none" value="Sign out" action="#{customerBean.signOut}"></p:commandLink>

						</strong>
					</div>
				</div>

				<table>
					<tr>
						<td><h:graphicImage width="200" height="100"
								value="#{resource['images:logo.jpg']}" /></td>
						<td>
							<h1>
								<h:outputText value="#{msg['top.name']}" />
							</h1>
						</td>
					</tr>

				</table>

			</h:form>
		</div>

		<div id="content">
			<h:form>

				<p:layout
					style="min-width:500px;min-height:500px;max-height:550px;border: none; padding:0em;"
					id="layout">

					<p:layoutUnit position="west" resizable="false" size="230"
						minSize="200" maxSize="300"
						style="padding-left: 0em;padding-top: 0em;">
						<ui:include src="/templates/leftMenu.xhtml" />
					</p:layoutUnit>
					<p:layoutUnit position="center" id="mainContent" styleClass="content"
						style="padding:0em;">
						<ui:insert name="content">

						</ui:insert>
					</p:layoutUnit>
				</p:layout>

			</h:form>
		</div>
		<div id="footer">
			<h:form>

				<p:toolbar style="height:30px;">
					<p:toolbarGroup align="left">

						<h:outputText
							value="©2011 Farmers Insurance - All Rights Reserved"></h:outputText>

					</p:toolbarGroup>
					<p:toolbarGroup align="right">
						<p:commandLink>
							<h:outputText value="Contact us"></h:outputText>
						</p:commandLink>

					</p:toolbarGroup>



				</p:toolbar>

			</h:form>

		</div>
	</div>

</h:body>

</html>